<template>
    <div class="adminbid">
        <div class="upload">
            <el-button type="primary">
                <el-icon style="margin-right: 5px;">
                    <UploadFilled/>
                </el-icon>
                发布采购
            </el-button>
        </div>
        <div class="list">
            <div class="search">
                <div class="search-item">
                    <p>项目名称 </p>
                    <el-input v-model="input" placeholder="Please input"/>
                </div>
                <div class="search-item">
                    <p>发布状态 </p>
                    <el-select v-model="value" placeholder="请选择状态" size="large">
                        <el-option key="0" label="全部" value="0"/>
                        <el-option key="1" label="发布中" value="1"/>
                        <el-option key="2" label="已完成" value="2"/>
                    </el-select>
                </div>
                <div class="search-item">
                    <p>采购类型 </p>
                    <el-select v-model="value" class="m-2" placeholder="Select" size="large">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="search-item">
                    <el-button type="primary">查询</el-button>
                </div>
                <div class="search-item">
                    <el-button type="info">重置</el-button>
                </div>
            </div>

            <div v-for="item in 5" class="list-item">
                <div class="tops">
                    <el-tag>进行中</el-tag>
                    <el-tag class="ml-2" type="warning">已完成</el-tag>
                    <p>招标项目名称</p>
                </div>
                <div class="center">
                    <div class="center-left">
                        <p>招标类别：办公用品</p>
                        <p>发布时间：2023-07-20</p>
                        <p>招标方式：公开招标</p>
                        <p>截至时间：2023-08-30</p>
                    </div>
                    <div class="steps">
                        <el-steps :active="2" align-center>
                            <el-step description="" title="Step 1"/>
                            <el-step description="Some" title="Step 2"/>
                            <el-step description="Some" title="Step 3"/>
                            <el-step description="Somedescription" title="Step 4"/>
                        </el-steps>
                    </div>
                    <div class="btns">
                        <el-button type="primary">查看</el-button>
                        <el-button type="info" text>终止采购</el-button>
                    </div>
                </div>

            </div>
            <div class="pages">
                <el-pagination :total="1000" background layout="prev, pager, next"/>
            </div>

        </div>
    </div>
</template>


<script setup>
/**
 * 组件引入
 */
import {onMounted, reactive, ref, computed} from 'vue'
import http from "../../api/api.js"
import msg from "../../utils/Message.js"
import Cookies from "js-cookie";
import {useRouter} from 'vue-router'

/**
 * 全局变量
 * @type {UnwrapNestedRefs<{count: string, list: *[]}>}
 */

const router = useRouter()

const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    }


]
/**
 * 页面挂载后
 */
onMounted(() => {
    isLogin()
});

/**
 * 计算属性
 */

/**
 * 方法区
 */


// 是否登录
const isLogin = () => {
    const token = Cookies.get("token")
    if (!token) {
        msg.message("您未登录，请登录", 'error')
    }
}

//跳转路由
function GetLinkUrl(item, index) {
    activeIndex.value = index
    router.push(item.url)
}

</script>

<style lang="scss" scoped>
@import '../../assets/scss/index.scss';
</style>

